<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!--
    Created using JS Bin
    http://jsbin.com
    Copyright (c) 2016 by darkthread (http://jsbin.com/penog/1/edit)
    Released under the MIT license: http://jsbin.mit-license.org
    -->
    <meta name="robots" content="noindex">
    <title>HTML to Image</title>
    <style>
        table { background-color: #ccddff; }
        td { padding: 2px 6px; }
        table input {
            width: 100px; padding: 2px 6px;
            color: blue; border: 1px solid gray;
        }
        fieldset { width: 200px; height: 120px; margin-top: 6px; }
    </style>
</head>
<body>
<table>
    <tr><td>姓名</td><td><input id="name" value="Darkthread"></td></tr>
    <tr><td>积分</td><td><input value="9999"></td></tr>
</table>
<hr />
<input type="button" value="转为图档" />
<a></a>
<fieldset>
    <legend>图档</legend>
    <div>
    </div>
</fieldset>
<script src="r/jquery-1.9.1.js" type="text/javascript"></script>
<script src="r/knockout-3.0.0.js" type="text/javascript"></script>
<script src="r/html2canvas.js" type="text/javascript"></script>
<script type="text/javascript">
//    $(function(){
//        var valStr='scale('+2+','+2+')';
//        $('#name').css({
//            'transform':valStr
//            ,'-webkit-transform':valStr
//            ,'-ms-transform':valStr
//            ,'-moz-transform':valStr
//        });
//    });
    $(":button").click(function() {
        html2canvas($("table")[0], {
            onrendered: function(canvas) {
                var $div = $("fieldset div");
                $div.empty();
                $("<img />", { src: canvas.toDataURL("image/png") }).appendTo($div);
            }
        });
    });
</script>
<script src="r/edit.js?3.39.2"></script>
<script>jsbinShowEdit && jsbinShowEdit({"static":"http://static.jsbin.com","root":"http://jsbin.com"});</script>
<script type="text/javascript">
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','r/analytics.js','ga');
    ga('create', 'UA-1656750-34', 'auto');
    ga('require', 'linkid', 'linkid.js');
    ga('require', 'displayfeatures');
    ga('send', 'pageview');
</script>

</body>
</html>